<template>
  <div class="printCon">
    <h3>在线打印</h3>
    <el-row>
      <el-col :span="19">
        <el-upload v-model:file-list="fileList" class="upload-print" ref="uploadRef" drag action="/api/print" :limit="Max" :on-success="onSuccess" :on-exceed="onExceed" :auto-upload="false" :data="printSetModel"
          :disabled="printingMessage">
          <div v-if="printingMessage" class="progressTip">
            <el-progress type="dashboard" :percentage="percentage" :color="colors"  />
          </div>
          <el-icon class="el-icon--upload" v-else><upload-filled /></el-icon>
          <div class="el-upload__text">
            拖拽文件到此处或者 <em style="margin-right: 10px;">点击上传</em>
            <el-popover
              placement="top-start"
              trigger="hover"
            >
              <template #reference>
                <em>手机扫码打印</em>
              </template>
              <div>
                <img :src="printQrcode" width="200"/>
              </div>
            </el-popover>
            <br/><br/>
            
          </div>
          <template #tip>
            <div class="el-upload__tip">
              提示：<br/>
              1. 长时间无响应请检查打印机或者更换打印机<br/>
              2. 提示打印成功，打印机没有打印，请联系桌面运维核对打印机ip是否正确
            </div>
          </template>
        </el-upload>
      </el-col>
      <el-col :span="5">
        <div class="printSet">
          <h4>打印配置</h4>
          <el-form label-position="top" :model="printSetModel" >
            <el-form-item label="打印机">
              <el-select v-model="printSetModel.print" clearable placeholder="请选择打印机">
                <el-option v-for="print in printIpList" :key="print.ip" :label="print.label" :value="print.ip"></el-option>
                <!-- <el-option label="818" value="818"></el-option>
                  <el-option label="818" value="818"></el-option>
                  <el-option label="603" value="603"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item label="双面打印">
              <el-select v-model="printSetModel.doublSided" placeholder="是否双面打印">
                <el-option label="双面打印" value="1"></el-option>
                <el-option label="单面打印" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="份数">
              <el-input type="number" v-model="printSetModel.num" placeholder="输入打印份数" :style="{ 'width': '218px' }"></el-input>
            </el-form-item>
            <el-form-item label="彩色打印">
              <el-select v-model="printSetModel.color" placeholder="是否彩色打印">
                <el-option label="彩色打印" value="1"></el-option>
                <el-option label="黑白打印" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-button type="primary" :disabled="!fileList.length" :loading="!!printingMessage" @click="print">打印</el-button>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { UploadFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import printQrcode from './assets/printQrcode.png';


const printIpList = [
  {
    label: '603',
    ip: '172.16.100.15'
  },
  {
    label: '802',
    ip: '172.16.100.21'
  },
  {
    label: '804',
    ip: '172.16.100.236'
  },
  // {
  //   label: '812',
  //   ip: '172.16.100.229'
  // },
  // {
  //   label: '814',
  //   ip: '172.16.100.221'
  // },
  {
    label: '817',
    ip: '172.16.100.235'
  },
  {
    label: '818',
    ip: '172.16.100.220'
  },
  // {
  //   label: '822',
  //   ip: '10.6.28.204'
  // },
  {
    label: '904',
    ip: '172.16.100.237'
  },
  {
    label: '917',
    ip: '172.16.101.18'
  },
];
const Max = ref(1);
const {print: _print = printIpList[0].ip, _doublSided='1', _color='1'} = JSON.parse(localStorage.getItem('printSetModel') || '{}');
const printSetModel = ref({
  print: _print,
  doublSided: _doublSided,
  num: 1,
  color: _color,
});

const printingMessage = ref();
const uploadRef = ref();
const fileList = ref([]);
const print = async () => {
  localStorage.setItem('printSetModel', JSON.stringify(printSetModel.value));
  if(printingMessage.value) return;
  printingMessage.value = ElMessage({
    type: 'warning',
    message: '正在排队,上传打印中...',
    duration: 0
  });
 await uploadRef.value.submit();
 setTimeout(() => {
  percentage.value += 30;
 }, 500);
};
const onSuccess = (response, file) => {
  if(response.code == 0) {
    ElMessage({
      type: 'success',
      message: response.msg,
    });
    percentage.value = 100;
  } else {
    ElMessage({
      type: 'error',
      message: response.msg,
    });
  }
  // percentage.value += Number((100/fileList.value.length).toFixed(2));
  // if(percentage.value.toFixed(0) == '100') {
  //   percentage.value = 0;
  //   uploadRef.value.clearFiles(); // 先删除选择的文件
  //   printingMessage.value.close();
  //   printingMessage.value = undefined;
  // }
  
  setTimeout(() => {
    percentage.value = 0;
    uploadRef.value.clearFiles(); // 先删除选择的文件
    nextTick(() => {
      // file里面的raw就是File类型，直接复制给组件
      uploadRef.value.handleStart(file.raw); // 重新赋值原来的文件
    });
    printingMessage.value.close();
    printingMessage.value = undefined;
  }, 500);
  
};
const onExceed = () => {
  ElMessage({
    type: 'warning',
    message: '单次只能打印一份，请打印或者删除当前文档',
  });
};

const percentage = ref(10);
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
];
onMounted(() => {
  document.title = '在线打印';
});
</script>
<script>
export default {
  name: 'App'
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.printCon {
  margin: 0 auto;
  padding: 0px 30px;
  max-width: 1200px;
}
h3 {
  margin-bottom: 60px;
  text-align: left;
}

.el-icon--upload, .progressTip {
  height: 240px;
}
.progressTip {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-upload__text {
  padding-bottom: 100px;
  color: #bbb;
}

:deep(.el-dialog__body) {
  text-align: center;
}
.printSet {
  padding: 0 10px;
  text-align: left;
}
</style>
